<template>

  <el-row>
    <!-- 左侧栏 -->
    <el-col :span="7"
            class="left-col"
            id="col-left">
      <!-- tabs标签页组件 -->
      <el-tabs v-model="activeName">
        <!-- 点餐系统 -->
        <el-tab-pane label=" 点 餐 "
                     name="first"
                     class="first">
          <!-- table栏 -->
          <el-table :data="tableData"
                    style="width: 100%"
                    border>
            <el-table-column prop="goodsName"
                             label="商品名称"
                             min-width="80">
            </el-table-column>
            <el-table-column prop="count"
                             label="数量"
                             min-width="50">
            </el-table-column>
            <el-table-column prop="price"
                             label="金额"
                             min-width="50">
            </el-table-column>
            <el-table-column prop="date"
                             label="操作"
                             fixed="right">
              <template slot-scope="scope">
                <el-button type="text"
                           size="mini"
                           @click="deleteGoods(scope.row)">删除</el-button>
                <el-button type="text"
                           size="mini"
                           @click="addCount(scope.row)">增加</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 总计 -->
          <div class="total">
            <span><i>数量:</i>{{totalCount}}</span>
            <span><i>价格:</i>{{totalMoney}} 元</span>
          </div>
          <div class="btn">
            <!-- 操作 -->
            <el-button type="warning"
                       size="mini">挂单</el-button>
            <el-button type="danger"
                       size="mini"
                       @click="deletaAllGoods">删除</el-button>
            <el-button type="success"
                       size="mini"
                       @click="checkOut">结账</el-button>
          </div>
        </el-tab-pane>
        <!-- 挂单系统 -->
        <el-tab-pane label=" 挂 单 "
                     name="second">挂单系统</el-tab-pane>
        <!-- 外卖系统 -->
        <el-tab-pane label=" 外 卖 "
                     name="third">外卖系统</el-tab-pane>
      </el-tabs>
    </el-col>
    <!-- 右侧栏 -->
    <el-col :span="17">
      <!-- 常用商品栏 -->
      <div class="often-goods">
        <div class="title">常用商品</div>
        <div>
          <ul>
            <li v-for="(item,i) in oftenGoods"
                :key="i"
                @click="addOrderList(item)">
              <span>{{item.goodsName}}</span>
              <span class="priceStyle">￥{{item.price}}元</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="goods-type">
        <el-tabs v-model="activeNameType">
          <el-tab-pane label="汉 堡"
                       name="hamburger">
            <ul class='cookList'>
              <li v-for="(item,i) in typeGoods[0]"
                  :key="i"
                  @click="addOrderList(item)">
                <span class="foodImg"><img :src="item.goodsImg"
                       width="100%"></span>
                <span class="foodName">{{item.goodsName}}</span>
                <span class="foodPrice">￥{{item.price}}元</span>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="小 食"
                       name="snack">
            <ul class='cookList'>
              <li v-for="(item,i) in typeGoods[1]"
                  :key="i"
                  @click="addOrderList(item)">
                <span class="foodImg"><img :src="item.goodsImg"
                       width="100%"></span>
                <span class="foodName">{{item.goodsName}}</span>
                <span class="foodPrice">￥{{item.price}}元</span>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="饮 料"
                       name="drink">
            <ul class='cookList'>
              <li v-for="(item,i) in typeGoods[2]"
                  :key="i"
                  @click="addOrderList(item)">
                <span class="foodImg"><img :src="item.goodsImg"
                       width="100%"></span>
                <span class="foodName">{{item.goodsName}}</span>
                <span class="foodPrice">￥{{item.price}}元</span>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="套 餐"
                       name="set meal">
            <ul class='cookList'>
              <li v-for="(item,i) in typeGoods[3]"
                  :key="i"
                  @click="addOrderList(item)">
                <span class="foodImg"><img :src="item.goodsImg"
                       width="100%"></span>
                <span class="foodName">{{item.goodsName}}</span>
                <span class="foodPrice">￥{{item.price}}元</span>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </div>

    </el-col>
  </el-row>

</template>
<script>

export default {
  data () {
    return {
      activeName: 'first',
      activeNameType: 'hamburger',
      // 已选中商品列表
      tableData: [],
      // 常用商品列表
      oftenGoods: [],
      // 全部分类列表
      typeGoods: []

    }
  },
  created () {
    this.getType0Goods()
    this.getOftenGoods()
  },
  methods: {
    // 获取分类列表数据
    async getType0Goods () {
      const { data: res } = await this.axios.get('https://www.fastmock.site/mock/0bf6a5bae7eab8507e44b56191ddff36/vuepos/typeGoods')
      this.typeGoods = res.data
    },
    // 获取常用商品数据
    async getOftenGoods () {
      const { data: res } = await this.axios.get('https://www.fastmock.site/mock/0bf6a5bae7eab8507e44b56191ddff36/vuepos/oftenGoods')
      console.log(res)
      this.oftenGoods = res.oftenGoods
    },
    // 点击商品添加到点餐区
    addOrderList (goods) {
      const flag = this.tableData.some((item) => {
        return item.goodsId === goods.goodsId
      })
      if (!flag) {
        const newGoods = {
          goodsId: goods.goodsId,
          goodsName: goods.goodsName,
          price: goods.price,
          count: 1
        }
        this.tableData.push(newGoods)
      } else {
        const arr = this.tableData.filter(i => {
          return i.goodsId === goods.goodsId
        })
        arr[0].count++
      }
    },
    // 添加商品数量操作
    addCount (i) {
      i.count++
    },
    // 删除商品操作
    deleteGoods (i) {
      console.log(i)

      this.tableData = this.tableData.filter(item => {
        return item.goodsId !== i.goodsId
      })
    },
    // 删除所有所选商品
    deletaAllGoods () {
      if (this.tableData.length !== 0) {
        this.totalCount = 0
        this.totalMoney = 0
        this.tableData = []
        this.$message.success('成功删除')
      }
    },
    // 结账
    checkOut () {
      if (this.tableData.length !== 0) {
        this.totalCount = 0
        this.totalMoney = 0
        this.tableData = []
        this.$message.success('已完成支付')
      }
    }
  },
  mounted () {
    const orderHeight = document.body.clientHeight
    document.querySelector('#col-left').style.height = orderHeight + 'px'
  },
  computed: {
    totalCount: {
      get () {
        let count = 0
        this.tableData.forEach(item => {
          count += item.count
        })
        return count
      },
      set () { }
    },
    totalMoney: {
      get () {
        let totalPrice = 0
        this.tableData.forEach(item => {
          totalPrice += item.price * item.count
        })
        return totalPrice
      },
      set () { }
    }
  }
}

</script>
<style lang="less" scoped>
.left-col {
  background-color: #f9fafc;
  border-right: 1px solid c;
  height: 100%;
}
.el-tabs {
  padding: 0 5px;
}
.btn {
  text-align: center;
  margin-top: 10px;
}
.btn .el-button {
  margin: 0 15px;
}

.title {
  height: 40px;
  font-weight: 600;
  line-height: 40px;
  padding-left: 20px;
  border-bottom: 1px solid #c0ccda;
}
.often-goods ul li {
  list-style: none;
  float: left;
  border: 1px solid #c0ccda;
  padding: 10px;
  margin: 10px;
}
.goods-type ul li,
.often-goods ul li {
  cursor: pointer;
}
.goods-type {
  clear: both;
}
.priceStyle {
  color: rgb(66, 132, 231);
}
.cookList img {
  height: 70px;
  width: auto;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}
.cookList li {
  list-style: none;
  width: 20%;
  border: 1px solid #e5e9f2;
  height: auto;
  overflow: hidden;
  background-color: #fff;
  padding: 2px;
  float: left;
  margin: 2px;
  position: relative;
}
.cookList li span {
  display: block;
  float: left;
}
.foodImg {
  width: 40%;
}
.foodName {
  font-size: 18px;
  padding-left: 10px;
  color: brown;
  margin-top: 80px;
}
.foodPrice {
  font-size: 16px;
  padding-left: 10px;
  padding-top: 10px;
}
.total {
  margin: 10px 0;
  text-align: center;
}
.total i {
  font-style: normal;
  font-size: 14px;
  margin: 0 10px;
}
</style>
